<script type="text/javascript">
    volumeOpts ={
        "currval":100,
        "animationSpeed":100,
        "angle":0.20,
        "lineWidth":0.36,
        "pointer":{"length":0.78,"color":"#000000","strokeWidth":0.030},
        "fontSize":20,
        "colorStart":"#6FADCF",
        "colorStop":"#8FC0DA",
        "strokeColor":"#E0E0E0",
        "generateGradient":true
    }

    function initGauge(){
        demoGauge = new Gauge(document.getElementById("volume-canvas-preview"));
        //demoGauge.setTextField(document.getElementById("volume-preview-textfield"));
        var totalVal = parseInt("{{ cluster.volume_total_ }}");
        var usedVal = parseInt("{{ cluster.volume_used }}");
        if (usedVal > totalVal){
            usedVal = totalVal;
        };
        if (totalVal == 0){
            totalVal = 19;
        };
        demoGauge.maxValue = totalVal;
        demoGauge.set(usedVal);
        //demoGauge.set(parseInt("{{ cluster.volume_used }}"));
        demoGauge.animationSpeed = volumeOpts.animationSpeed;
        volumeOpts.generateGradient = true;
        demoGauge.setOptions(volumeOpts);
        demoGauge.ctx.clearRect(0, 0, demoGauge.ctx.canvas.width, demoGauge.ctx.canvas.height);
        demoGauge.render();
    };
    //$(function() {
    //    initGauge();
    //});
/*$('#indicatorVolume').radialIndicator({
    barColor: '#33CC33',
    barWidth: 6,
    initValue: {{ cluster.volume_used_per }},
    percentage: true
});*/


</script>

<div class="panel-heading"><b>[[ 'volume capacity'|translate ]]</b></div>
<!--
<div class="preview">
      <canvas width=220 height=170 id="volume-canvas-preview"></canvas>
    <div id="volume-preview-textfield">总量：<span>{{ cluster.volume_total_ }} G</span></div>
    <div class="volume_number">已用{{ cluster.volume_used }}G,<span>{{ cluster.volume_used_per }}</span>%</div>
</div>
-->

<div id="indicatorVolume" class="Volume_utilization">
</div>
<div class="Volume_value">
    <p>[['volume used'|translate]]：{{ cluster.volume_used/2 }}G</p>
    <p>[['value volume capacity'|translate]]：{{ cluster.volume_total_ }}G</p>
</div>
<style type="text/css">
.preview {
    background: #f9f9f9; position: relative;
    width: 220px;
    height: 220px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin:0 auto;
}
#volume-canvas-preview{
  width: 220px; top: 40px;
  position: relative;
}
#volume-preview-textfield{
    position: relative; width:150px;height:20px;margin-top:px;
    float:right;
    right:-40px;
    text-align: center; font-size:15px; font-weight: bold;
    font-family: 'Amaranth', sans-serif;
}
.volume_number{
    width:200px;
    height:20px;
    position:relative;
    margin:0 auto;
    color:#636e7b;
    font-size:20px;
    margin-top:50px;
    text-align:center;
}
</style>
